<script setup name="Header">
import en from 'element-plus/dist/locale/en.mjs'
import ru from 'element-plus/dist/locale/ru.js'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import {Sunny, Moon, Expand, Fold} from '@element-plus/icons-vue'
import {useDark, useToggle} from '@vueuse/core'
import screenfull from 'screenfull';
import {baseStore} from "@/store/baseStore.js";
import UserInfo from "@/pages/index/header/comp/UserInfo.vue";
import {inject} from "vue";

zhCn.name = 'zh'
const t = inject('$t')
const bs = baseStore()
const {menuFoldState, localState, fullscreenState, token} = storeToRefs(bs)
const router = useRouter();
const isDark = useDark()
const toggleDark = useToggle(isDark)
const name = import.meta.env.ENV_PROJECT_NAME
const html = document.getElementsByTagName("html")[0]
const userInfo = ref(null)
const bus = inject('bus')


const fullscreen = () => {
    if (!screenfull.isFullscreen) {
        // 给 html 加样式
        html.classList.add('hide')
        fullscreenState.value = true
        screenfull.request();
    } else {
        html.classList.remove('hide')
        fullscreenState.value = false
        screenfull.exit()
    }
}

window.addEventListener('fullscreenchange', () => {
    if (screenfull.isFullscreen) {
        return
    }
    fullscreenState.value = false
    html.classList.remove('hide')
})

const out = () => {
    token.value = null
    location.reload()
}

</script>
<template>
    <el-menu
        class="header-el-menu"
        mode="horizontal"
        :ellipsis="false"
    >

        <el-row class="header-row is-active">
            {{ $t('header.title') }}
        </el-row>

        <el-row @click="menuFoldState = !menuFoldState" addable class="header-row is-active">
            <el-icon v-show="menuFoldState" class="header-icon">
                <Expand/>
            </el-icon>
            <el-icon v-show="!menuFoldState" class="header-icon">
                <Fold/>
            </el-icon>
        </el-row>

        <MenuTab/>

        <div class="flex-grow"/>

        <el-row class="header-row is-active" @click="fullscreen">
            <el-icon class="header-icon">
                <FullScreen/>
            </el-icon>
        </el-row>


        <el-row class="header-row is-active">
            <el-switch
                index="3"
                v-model="isDark"
                inline-prompt
                :active-icon="Moon"
                :inactive-icon="Sunny"
                @change="toggleDark"
                style="--el-switch-on-color: #4C4D4F; --el-switch-off-color: #dcdfe6"
            />
        </el-row>

        <el-menu
            :ellipsis="false"
            mode="horizontal"
            :popper-offset="5"
            class="header-row header-row-menu"
        >
            <el-sub-menu index="1">
                <template #title>
                    <span class="header-row-span">
                        <el-icon class="header-icon"><UserFilled/></el-icon>
                    </span>
                </template>
                <el-sub-menu index="1-1">
                    <template #title>{{ $t('header.language.title') }}</template>
                    <el-menu-item index="1-1-1" @click="localState = zhCn">{{ $t('header.language.zh') }}</el-menu-item>
                    <el-menu-item index="1-1-2" @click="localState = en">{{ $t('header.language.en') }}</el-menu-item>
                    <el-menu-item index="1-1-3" @click="localState = ru">{{ $t('header.language.ru') }}</el-menu-item>
                </el-sub-menu>
                <el-menu-item index="1-2" @click="userInfo.show()">{{ $t('header.user.info') }}</el-menu-item>
                <el-menu-item class="el-menu-divided" index="1-3" @click="out">{{ $t('header.user.out') }}</el-menu-item>
            </el-sub-menu>
        </el-menu>

    </el-menu>

    <UserInfo ref="userInfo"/>

</template>

<style lang="scss" scoped>
.flex-grow {
    flex-grow: 1;
}

.header-el-menu {
    height: 59px;
    user-select: none;
    :deep(.el-menu){
        border: none !important;
    }
}

.el-menu--horizontal .el-menu .el-menu-item.is-active,
.el-menu--horizontal .el-menu .el-sub-menu.is-active>.el-sub-menu__title{
    color: var(--el-menu-text-color) !important;
}
:deep(.el-sub-menu__title){
    /* 重置你不想应用的样式，例如颜色、背景等 */
    color: var(--el-menu-text-color) !important;
    border: none !important; /* 或透明或其他背景色 */
}
.el-menu-divided{
    margin-top: 3px;
    border-top: 1px solid var(--el-border-color-light);
}

.header-row {
    padding-left: 20px;
    padding-right: 20px;
    cursor: pointer;
    height: 100%;
    align-items: center;
    white-space: nowrap;
    user-select: none;
}

.header-row-menu{
    padding-left: 0 !important;
}

.header-icon {
    font-size: 20px;
}

.el-icon--right {
    font-size: 1.1em;
    top: -1px;
}
</style>
